<template>
  <div class="department">
    <div class="search">
      <page-search @queryClick="queryClick" @resetClick="resetClick" />
    </div>

    <div class="contenet">
      <page-content ref="pageContentRef" @newClick="newClick" @editClick="editClick" />
      <page-modal ref="pageModalRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import pageSearch from './components/page-search.vue'
  import pageContent from './components/page-content.vue'
  import pageModal from './components/page-modal.vue'

  const pageContentRef = ref<InstanceType<typeof pageContent>>()
  const pageModalRef = ref<InstanceType<typeof pageModal>>()
  function queryClick(searchForm: any) {
    pageContentRef.value?.fetchUserListData(searchForm)
  }
  function resetClick() {
    pageContentRef.value?.fetchUserListData()
  }

  function newClick() {
    pageModalRef.value?.setDialogVisible()
  }

  function editClick(dept: any) {
    pageModalRef.value?.setDialogVisible(false, dept)
  }
</script>

<style scoped>
  .department {
    .search {
      margin-bottom: 20px;
    }
  }
</style>
